<template>
  <div>
       <h1>vue3  知识点</h1>

       <div>
          <h1>{{myname}}</h1>
          <h1>{{age}}</h1>
       </div>
       <button @click="change">改变</button>
        <h1>{{kk.carname}}</h1>
        <hr>
        <live-one ref="son" name="王宝强" age="18" sex="男">
          <template #footer>
            <div> 
                <h1>我是脚步插槽</h1>
            </div>
          </template>
        </live-one>
        <button @click="sendData">发送数据</button>
  
  </div>
</template>

<script setup>
 import {nextTick,provide,readonly,ref,reactive,watchEffect} from 'vue'
 import {useRoute} from 'vue-router'
import liveOne from './liveOne.vue'
//  1. watchEffect    监听一个函数，函数内部依赖的响应式数据发生变化，就会重新执行这个函数
// 2. watchEffect 不需要监听具体的数据，只要函数内部依赖的数据发生变化，就会执行这个函数
let myname=ref("张三")
let age=ref(18)
  watchEffect(()=>{
    // 
      console.log(myname.value)
      console.log(age.value)
      console.log("触发watchEffect")
  })
  // 
  let change=()=>{
    myname.value="李四"
     state.carname="宾利"
  }
  // 2 readyonly  vue用来创建只读数据的方法 创建的数据不能被修改

    let kk=readonly({
        carname:"法拉利",
        color:"red"
    })


  //  provide 像后代组件传子 祖孙传值
  // provide(key,你传的值)
  let key=ref("我是你的爷爷")

   provide("keyGen",key.value)
  

  // 通过ref 获取子组件
  let son=ref(null)

  nextTick(()=>{
      son.value.sayHI()//调用子组件的方法
      console.log(son.value.mycity,"-------------")
  })

  // useRoute  vue3 路由 接收参数的方法
  let route=useRoute();


  console.log(route,"-----接收路由参数--------")
  // route 对象下  fullPath 整体路由
  // route 对象下  params  路由参数
  // route 对象下  query  查询参数
  // route 对象下  name  查询参数
  // route 对象下  meta  查询参数
  // route 对象下  hash  查询参数
   console.log(route.query.name)
  console.log(route.query.age)


</script>
